<template>
  <div class="theme">
    <div style="font-size:18px;"><a-icon type="dashboard" style="margin-right:8px;margin-bottom:24px;" />{{$t('theme')}}</div>
    <a-space direction="vertical" size="large" style="width:100%;">
      <!-- <div>
        <span class="set-title">{{$t('nightMode')}}:</span>
        <a-switch :checked="theme.mode=='night'" @change="val=>btnClick('setTheme',{...theme,mode:val?'night':'light'})" />
      </div> -->
      <div>
        <span class="set-title">{{$t('weakMode')}}:</span>
        <a-switch :checked="weekMode" @change="val=>btnClick('setWeekMode',val)" />
      </div>
      <div>
        <span class="set-title">{{$t('themeColor')}}:</span>
      </div>
      <div>
        <v-swatches class="swatches" v-model="color" inline :swatches="palettes" :background-color="theme.mode=='light'?'#fff':'#141414'" show-fallback fallback-input-class="color-picker" fallback-input-type="color" :wrapper-style="wrapperStyle">
        </v-swatches>
      </div>
    </a-space>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { windowMsgPost } from '@/utils/util';
import {  saveSetting } from './setting';
import VSwatches from 'vue-swatches';
import debounce from "lodash/debounce";
import "vue-swatches/dist/vue-swatches.css"
export default {
  name: 'Theme',
  i18n: require('./i18n'),
  data () {
    return {
      wrapperStyle:{
        display: 'inline-block',
      },
      color: '#1CA085'
    }
  },
  components:{VSwatches },
  computed: {
    ...mapState('setting',['theme','palettes','weekMode'])
  },
  watch: {
    color: debounce(function(){
      if(this.color!=this.theme.color) this.btnClick('setTheme',{...this.theme,color:this.color})
    },800),
  },
  mounted() {
    this.color = this.theme.color;
  },
  methods: {
    ...mapMutations('setting', ['setTheme','setWeekMode']),
    btnClick(mutation,value){
      windowMsgPost({mutation,value})
      this[mutation](value)
      saveSetting()
    },
  },

}
</script>
<style lang="less" scoped>
  .theme{
    padding: 12px;
    padding-bottom: 30px;
    background-color: @base-bg-color;
    height: auto;
    .set-title{
      display: inline-block;
      width: 170px;
      color: @text-color;
    }
    .theme-color{
      cursor: pointer;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 8px;
      color: #fff;
    }
    .swatches{
      /deep/.vue-swatches__fallback__wrapper{
        display: inline-block;
        padding-bottom: unset !important;
      }
      /deep/.color-picker{
        width:42px;
        height: 42px;
        border-radius:11px;
        padding: 2px 3px;
      }
    }
  }
</style>